<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{  otherMsg()  }}

        <!-- {{  newMsg  }} -->

        <!-- {{msg  |  formatString}}

        <div v-model="ht">
            <img :src="imgSrc" alt="" height="600px" width="700px">
            <a :href="url">有问题问我，包问包会！</a>
            <button @click="handleclick">这个是按钮</button>
        </div> -->

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                msg:"噼里啪啦",
                ht:"<h1>迷人的小饼干 </h1>",
                imgSrc:"imgs/hhhh.png",
                url:"https://baidu.com"
            },
            computed:{
                newMsg:function(){
                    return this.msg+" 小猫在午睡时，地球在转。";
                }
            },
            filters:{
                formatString:function(val){
                    return val+" 一哩哇啦";
                }
            },
            methods:{ /*方法*/
                handleclick:function () {
                    console.log("你点击了按钮，这里显示了一些东西...");
                },otherMsg:function(){
                    return this.msg+" 今天吃饭了么"
                }
            },
            mounted:function(){
                console.log('轻轻地走了'+new Date().toLocaleString());
            },
            created:function(){
                console.log('轻轻地来了'+new Date().toTimeString());
            }
        })
    </script>
</body>
</html>